<template>
  <div class="orderDetail">
    <div v-if="detail.id" class="info-wrap">
      <div class="tip">被访信息</div>
      <div class="item">
        <div v-if="detail.interviewedName" class="key-wrap">
          <div class="key-name">被访员工</div>
          <div class="key-value">{{ detail.interviewedName }}</div>
        </div>
        <div class="key-wrap">
          <div class="key-name">员工电话</div>
          <div class="key-value">{{ detail.interviewedPhone || '未填写' }}</div>
        </div>
        <div class="key-wrap">
          <div class="key-name">预约时间</div>
          <div class="key-value">{{ detail.beginTime }} 至 <br>{{ detail.endTime }}</div>
        </div>
        <div v-if="detail.alongWith" class="key-wrap">
          <div class="key-name">随行人数</div>
          <div class="key-value">{{ detail.alongWith }}</div>
        </div>
        <div v-if="detail.visitorReason" class="key-wrap">
          <div class="key-name">访问事由</div>
          <div class="key-value">{{ detail.visitorReason }}</div>
        </div>
        <div v-if="detail.carNumber" class="key-wrap">
          <div class="key-name">车辆信息</div>
          <div class="key-value">{{ detail.carNumber }}</div>
        </div>
        <div v-if="detail.carNumber" class="key-wrap">
          <div class="key-name">车辆进出</div>
          <div class="key-value button">
            <van-switch v-if="detail.status === 0" v-model="detail.allowCar" size="20px" style="margin-right:10px;" />{{ detail.allowCar ? '允许' : '拒绝' }}
          </div>
        </div>
      </div>

      <div class="tip" style="margin-top:15px">访客信息</div>
      <div class="item">
        <div class="key-wrap">
          <div class="key-name">访客姓名</div>
          <div class="key-value">{{ detail.visitorName }}</div>
        </div>
        <div class="key-wrap">
          <div class="key-name">访客电话</div>
          <div class="key-value">{{ detail.visitorPhone }}</div>
        </div>
        <div class="key-wrap">
          <div class="key-name">访客身份证</div>
          <div class="key-value">{{ detail.visitorIdCardNumber ? detail.visitorIdCardNumber.replace(/(\d{6})\d*([0-9a-zA-Z]{4})/, '$1********$2') : '未填写' }}</div>
        </div>
        <div class="key-wrap">
          <div class="key-name">访客健康码</div>
          <div class="key-value" :style="`color: ${detail.healthCodeColor}`" @click="showCodeImage(detail.healthCode, detail.visitorHealthCodeRefreshTime)">
            {{ detail.healthCodeStr }}</div>
        </div>
      </div>

      <div v-if="detail.status === 0 && userInfo.phone === detail.checkerPhone" class="btn-wrap">
        <div class="btn-left" @click="userHandle(true, detail.allowCar)"><span>同意</span></div>
        <div class="btn-right" @click="userHandle(false)"><span>拒绝</span></div>
      </div>

      <SjAudit v-if="dialogVisible" @closeDialog="closeDialog"></SjAudit>
      <van-popup v-model="healCodeDialogVisible" closeable>
        <div class="heal-wrap">
          <div class="time">{{ healInfo.time }}</div>
          <img :src="healInfo.img">
          <div class="status" :style="`color: ${healInfo.color}`">健康状态</div>
        </div>
      </van-popup>

    </div>
  </div>
</template>

<script>
import vant from 'vant'
import { Popup, Switch } from 'vant'
import commonUtils from '@/utils/common.js'
import SjAudit from '@/components/SjAudit/index.vue'
import { visitFlowPageAPI, visitFlowAuthorizeAPI } from '@/axios/api/visitor'
export default {
  components: {
    SjAudit,
    'van-popup': Popup,
    'van-switch': Switch
  },
  data() {
    return {
      healCodeDialogVisible: false,
      healInfo: {
        time: '',
        img: '',
        code: '',
        color: ''
      },
      dialogVisible: false,
      unitId: '',
      auditId: '',
      detail: {},
      userInfo: {}
    }
  },
  created() {
    document.title = '预约记录'
    this.unitId = this.$route.query.unitId
    this.auditId = this.$route.query.auditId
    this.getDetail()
    this.userInfo = JSON.parse(localStorage.getItem('visitorH5_userInfo'))
  },
  methods: {
    getDetail(auditId) {
      visitFlowPageAPI({ unitId: this.unitId, id: this.auditId }).then(res => {
        if (res.records.length) {
          res.records.map(v => {
          v.healthCodeStr = this.dealhealthCodeStr(v.healthCode)
          v.healthCodeColor = this.dealhealthCodeColor(v.healthCode)
          if (v.carNumber) { // 有车辆的，默认允许通行
            v.allowCar = true
          }
        })
        this.detail = res.records[0]
        } else {
          vant.Toast.fail({
          duration: 0, // 持续展示 toast
          message: '找不到该记录'
        })
        }
      }).catch(res => {
        vant.Toast.fail({
          duration: 0, // 持续展示 toast
          message: '找不到该记录'
        })
      })
    },
    // 点击--同意 or 拒绝
    userHandle(pass, allowCar) {
      pass ? this.submit(true, '', allowCar) : (this.dialogVisible = true)
    },
    // 关闭弹窗
    closeDialog(value) {
      value.refuse ? this.submit(false, value.reason) : (this.dialogVisible = false)
    },
    // 最终提交
    submit(pass, reason, allowCar) {
      if (commonUtils.click_busy()) return
      const params = {
        flowId: this.auditId,
        pass: pass, // 同意 or 拒绝
        reason: reason,
        allowCar: allowCar // 车辆是否通行
      }
      visitFlowAuthorizeAPI(params).then(() => {
        vant.Toast.success({
          duration: 1000,
          message: '提交成功'
        })
        setTimeout(() => {
          this.$router.push({ path: '/adminOrderList' })
        }, 1000)
        this.dialogVisible = false
      }).catch(res => {
        vant.Toast(res.data.detail || '提交失败')
      })
    },
    // 健康码颜色
    dealhealthCodeColor(code) {
      let color = ''
      switch (code) {
        case 0:
          color = '' // 未获取
          break
        case 1:
          color = '#52C41A' // 绿
          break
        case 2:
          color = '#FF9E3D' // 黄
          break
        case 3:
          color = '#D73232' // 红
          break
      }
      return color
    },
    // 健康码文案
    dealhealthCodeStr(code) {
      let str = ''
      switch (code) {
        case 0:
          str = '未知'
          break
        case 1:
          str = '绿码'
          break
        case 2:
          str = '黄码'
          break
        case 3:
          str = '红码'
          break
      }
      return str
    },
    showCodeImage(code, time) {
      if (code !== 0) {
        this.healInfo.time = time
        this.healInfo.img = require(`../../assets/image/banner/code${code}.png`)
        this.healInfo.code = code
        switch (code) {
        case 1:
          this.healInfo.color = '#55AB6B'
          break
        case 2:
          this.healInfo.color = '#ffb341'
          break
        case 3:
          this.healInfo.color = '#ff4141'
          break
        }
        this.healCodeDialogVisible = true
      }
    }
  }
}
</script>
<style lang="scss">
.orderDetail {
  .van-popup {
    width: 100%;
    padding: 0 15px;
    background: transparent;
    .van-popup__close-icon--top-right {
      right: 30px;
    }
  }
 .heal-wrap {
    padding: 10px 64px 10px;
    background: #fff;
    border-radius: 8px;
    .time {
      line-height: 47px;
      font-size: 15px;
      text-align: center;
    }
    img {
      display: block;
      width: 100%;
    }
    .status {
      line-height: 47px;
      font-size: 15px;
      text-align: center;
    }
  }
}
</style>
<style lang="scss" scoped>
@mixin flex-config($justify-content, $align-items) {
  display: flex;
  justify-content: $justify-content;
  align-items: $align-items;
}
.orderDetail {
  padding: 12px 15px;
}

.tip {
  line-height: 25px;
  font-size: 18px;
  color: #141e2a;
  font-weight: 500;
}

.item {
  position: relative;
  width: 100%;
  margin-top: 12px;
  padding: 24px 15px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0px 3px 6px rgba(38, 126, 255, 0.16);

  .key-wrap {
    margin-top: 12px;
    width: 100%;
    display: flex;
    .key-name {
      width: 92px;
      min-width: 92px;
      height: 20px;
      line-height: 20px;
      font-size: 14px;
      color: #707070;
    }
    .key-value {
      line-height: 20px;
      font-size: 14px;
      color: #141e2a;
    }
    .button {
      @include flex-config(flex-start, center);
    }
  }
  .key-wrap:nth-child(1) {
    margin-top: 0 !important;
  }
}

.btn-wrap {
  margin: 40px 15px 0;
  display: flex;
  justify-content: space-evenly;

  div {
    width: 120px;
    height: 32px;
    span {
      box-sizing: border-box;
      width: 120px;
      height: 32px;
      font-size: 15px;
      border-radius: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .btn-left span {
    color: #267eff;
    border: 1px solid #267eff;
  }
  .btn-right span {
    color: #a8a8a8;
    border: 1px solid #a8a8a8;
  }
}
</style>
